<template>
  <div class="print">
    <div>
      <div v-print="printOption" class="m-b-15">
        <el-button> 自动分页打印打印 </el-button>
      </div>
      <!-- 表头 -->
      <div class="centent">
        <slot name="head" />
        <print-comp
          class="exhibition-table-centent"
          :headers="headers"
          :data="data"
          :head-height="headSlotHeight"
          :head-slot-height="headSlotHeight"
          :default-table-height="defaultTableHeight"
          @table-height="calculatePaging"
        />
        <slot name="buttom" />
      </div>

    </div>

    <div class="print-view">
      <div id="nbprint">
        <slot name="head" />
        <div class="hide-table-centent">
          <template v-for="(item,index) in tableDatas">
            <print-comp
              :key="index"
              :is-exhibition="false"
              :headers="headers"
              :data="item.data"
              :print-height="item.printHeight"
            />
          </template>
        </div>
        <slot name="buttom" />
      </div>
    </div>
  </div>
</template>

<script>
import print from "vue-print-nb";
import PrintComp from "./Print.vue";

export default {
  name: "Print",
  components: { PrintComp },
  directives: {
    print
  },
  props: {
    // A4纸高 1000
    // 表头
    headers: {
      type: Array,
      require: true,
      default: () => []
    },
    // 内容
    data: {
      type: Array,
      require: true,
      default: () => []
    },
    // 表头前面 插槽的 高度
    headSlotHeight: {
      type: Number,
      default: 0
    },
    // 默认表格高度
    defaultTableHeight: {
      type: Number,
      default: 460
    }
  },
  data() {
    return {
      // 打印属性
      printOption: {
        id: "nbprint", // 打印元素的id 不需要携带#号
        preview: false, // 开启打印预览
        previewTitle: "打印预览", // 打印预览标题
        popTitle: "员工信息", // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        // 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点
        extraHead: "",
        // 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点
        // extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback: () => {
          console.log("触发打印预览打开前回调");
        },
        previewOpenCallback: () => {
          console.log("触发打开打印预览回调");
        },
        beforeOpenCallback: () => {
          console.log("触发打印工具打开前回调");
        },
        openCallback: () => {
          console.log("触发打开打印工具回调");
        },
        closeCallback: () => {
          console.log("触发关闭打印工具回调");
        },
        clickMounted: () => {
          console.log("触发点击打印回调");
        }
      },
      //
      defaultHeight: 1046,
      homeHeight: 0,
      tableDatas: []
    };
  },
  methods: {
    // 计算 每页展示的数据条数
    calculatePaging(allHeight) {
      console.log(this.headSlotHeight, "headSlotHeight");
      this.homeHeight = this.defaultHeight - this.headSlotHeight;

      // 页面数量
      const page = [];
      const headHeight = 30;
      // a4纸高度
      let a4Height = this.homeHeight - headHeight;
      // 边框的高度
      const borderHeight = 1;
      // 当前表格数量累计高度
      let height = 0;
      // 每页的数据量
      let count = 0;
      let sum = 0;
      const tableDatas = [];

      // 计算分页数量
      for (let i = 0; i < allHeight.length; i++) {
        // 当高度小于a4纸高度  并且不是最后一条数据(最后一条数据如果不满一页按一页计算)
        const h = !!(allHeight[i + 1]);
        // 每条数据的高度
        const tableHeight = allHeight[i] + borderHeight;
        // 当前高度 + i+1 高度小于 a4纸高度时
        if (h && ((height + allHeight[i + 1] + borderHeight) < a4Height)) {
          count++;
          height += tableHeight;
        } else {
          // 如果是最后一位
          if (i === allHeight.length - 1) {
            count++;
          }
          page.push(count);

          height = tableHeight;
          count = 1;

          // 当不是第一页使用
          a4Height = this.defaultHeight - headHeight;
        }
      }

      // 将数据拆分成 多页数据进行展示
      for (let i = 0; i < page.length; i++) {
        if (!tableDatas[i]) {
          tableDatas[i] = {
            data: [],
            printHeight: (i === 0 ? this.homeHeight : this.defaultHeight) + "px"
          };
        }
        for (let j = 0; j < page[i]; j++) {
          tableDatas[i].data.push(this.data[sum]);
          sum++;
        }
      }

      this.tableDatas = tableDatas;
    }
  }
};
</script>

